<template>
    <div :id="id"></div>
</template>

<script>
import echarts from "echarts";

export default {
    name: "radar",
    props: ["id"],
    methods: {
        drawCharts() {
            let my_chart = echarts.init(document.getElementById(this.id));

            let option = {
                grid: {
                    left: '-8%'
                },
                radar: {
                    shape: "circle",
                    name: {
                        textStyle: {
                            color: "#8997a3",
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: "专业", max: 10 },
                        { name: "经验", max: 10 },
                        {
                            name: "学习",
                            max: 10
                        },
                        { name: "探索", max: 10 },
                        { name: "管理", max: 10 }
                    ]
                },
                series: [
                    {
                        type: "radar",
                        data: [
                            {
                                value: [6, 4, 10, 4, 10]
                            }
                        ]
                    }
                ]
            };

            my_chart.setOption(option);
        }
    },
    mounted() {
        this.drawCharts();
    }
};
</script>

<style>
</style>
